<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            table {
                border-collapse: collapse;
                margin: 50px auto 0;
            }

            table, tr, td, th {
                border: 2px solid black;
            }

            th {
                padding: 10px 100px;
            }

            td {
                text-align: center;
                padding: 10px;
            }

            div {
                text-align: center;
            }


             /*弹出的窗口背景，占满整个屏幕*/
            #wg_alert {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                position: fixed;
                background: rgba(0, 0, 0, 0.5);
            }
             /*弹出的小窗口*/
            #wg_in {
                width: 400px;
                height: 500px;
                border: 2px solid black;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                background: white;
            }
             /*label:标签，本例子要修改的属性，姓名，性别和分数*/
            #wg_in label {
                display: inline-block;
                width: 80px;
                height: 40px;
                margin: 20px 0;
            }
              /*小弹窗输入框设置*/
            #wg_in input {
                width: 300px;
                height: 36px;
                margin: 20px 0;
                font-size: 25px;
            }


        </style>
    </head>
    <body>

        <div>
            姓名：<input type="text" id="name">
            性别：<input type="text" id="gender">
            分数：<input type="text" id="score">
            <button id="addBtn">添加</button>
        </div>

        <table>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>分数</th>
                <th>操作</th>
            </tr>
        </table>

      

        
    </body>
</html>
<script>
    function AlertDiv() {

        this.alert = document.createElement("div");
        this.alert.id = "wg_alert";
        this.inDiv = document.createElement("div");
        this.inDiv.id = "wg_in";
        this.alert.appendChild(this.inDiv);
        var nameLabel = document.createElement("label");
        nameLabel.innerHTML = "姓名: ";
        this.inDiv.appendChild(nameLabel);

        this.nameInput = document.createElement("input");
        this.inDiv.appendChild(this.nameInput);

        var genderLabel = document.createElement("label");
        genderLabel.innerHTML = "性别：";
        this.inDiv.appendChild(genderLabel);
        this.genderInput = document.createElement("input");
        this.inDiv.appendChild(this.genderInput);

        var scoreLabel = document.createElement("label");
        scoreLabel.innerHTML = "分数：";
        this.inDiv.appendChild(scoreLabel);
        this.scoreInput = document.createElement("input");
        this.inDiv.appendChild(this.scoreInput);

        //修改点击事件发生后该弹窗弹出
        this.show = function() {
         document.body.appendChild(this.alert);
        };
        //弹框，在保存点击事件发生后，该函数执行
        this.hide = function() {
            document.body.removeChild(this.alert);
        };

        // 设置内容的方法
        this.setContent = function(name, gender, score) {
            this.nameInput.value = name;
            this.genderInput.value = gender;
            this.scoreInput.value = score;
        };

        // 保存按钮
        this.saveBtn = document.createElement("button");
        this.inDiv.appendChild(this.saveBtn);
        this.saveBtn.style.width = "300px";
        this.saveBtn.style.textAlign = "center";
        this.saveBtn.style.margin = "50px";
        this.saveBtn.style.padding = "20px 0";
        this.saveBtn.innerHTML = "保 存";

    }

    // 初始化弹框插件
    var layer = new AlertDiv();


    // 获取元素
    var addBtn = document.getElementById("addBtn");

    var nameInput = document.getElementById("name");
    var genderInput = document.getElementById("gender");
    var scoreInput = document.getElementById("score");
    
    //querySelector方法返回文档中匹配指定 CSS 选择器的一个元素，但仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
    var table = document.querySelector("table");uerySelector() 

    // 点击事件
    addBtn.onclick = function() {

        var name = nameInput.value;
        var gender = genderInput.value;
        var score = scoreInput.value;

        // 创建tr
        var tr = document.createElement("tr");

        // 创建td
        var td_name = document.createElement("td");
        var td_gender = document.createElement("td");
        var td_score = document.createElement("td");
        td_name.innerHTML = name;
        td_gender.innerHTML = gender;
        td_score.innerHTML = score;

        // 拼接元素
        table.appendChild(tr);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_score);

        // 操作td
        var td_op = document.createElement("td");

        var modifyBtn = document.createElement("button");
        var delBtn = document.createElement("button");
        modifyBtn.innerHTML = "修改";
        delBtn.innerHTML = "删除";
        tr.appendChild(td_op);
        td_op.appendChild(modifyBtn);
        td_op.appendChild(delBtn);
        
        delBtn.onclick = function() {
            tr.remove();
        };

        modifyBtn.onclick = function() {
            layer.setContent(name, gender, score);
            layer.show();//调用函数，show使隐藏元素hide的内容显示，
            layer.saveBtn.onclick = function() {
               
                td_name.innerHTML = layer.nameInput.value;
                td_gender.innerHTML = layer.genderInput.value;
                td_score.innerHTML = layer.scoreInput.value;
                layer.hide();
            };
        };




    };










</script>